<template>
	<div class="collect bg-f5">
		<h3 class="bg-white align-right container pt10 pb10 c333 fs14" v-if="show" @click="show = false">完成</h3>
		<h3 class="bg-white align-right container pt10 pb10 c333 fs14" v-else @click="show = true">编辑</h3>
		<div class="border-t20 bg-white" v-if="data.list">
			<ul class="list w92 auto list-ul layout flex-w" style="padding-bottom:60px;" v-if='data.list.length'> 
			 	<li class="w48 mt15 pos-rel" v-for='(item,index) in data.list' :key='index'>
					<template v-if='show'>
						<van-checkbox v-model="item.checked" @change="isSelectALL" v-if="show">
							<img class="responsive-img img-bg" style="height: 10rem" :src="item.img" alt="">
							<p class='mt15 ellipsis c333 fs14'>{{ item.goods_name }}</p>
							<p class="mt5 ellipsis c666 fs12">{{ item.introduction }}</p>
							<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
							<div class="layout">
								<p><span class="fs12 subject">￥</span><strong class="fs18 subject bold">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
								<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
							</div>
						</van-checkbox>
					</template>
					<template v-else>
						<router-link :to="'/detail?id='+ item.crow_id">
				 			<img class="responsive-img img-bg" style="height: 10rem" :src="item.img" alt="">
							<p class='mt15 ellipsis c333 fs14'>{{ item.goods_name }}</p>
							<p class="mt5 ellipsis c666 fs12">{{ item.introduction }}</p>
							<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
							<div class="layout">
								<p><span class="fs12 subject">￥</span><strong class="fs18 subject bold">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
								<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
							</div>
						</router-link>
			 		</template>
				</li>
			</ul>
			<template v-else>
				<default explain="您还没有收藏商品~"></default>
			</template>
		</div>
		<footer class="shopping-close border-t layout bg-white pos-fix h50 lh50 full-width" style="bottom:0px;" v-if="show">
			<div class="flex_1 layout pl15 pr15">
				<div class="layout">
					<van-checkbox v-model="checked_all" @change='selectAll'></van-checkbox>
                    <span class="fs16 c333 ml5">全选</span>
				</div>
			</div>
			<button class="bg-red fs16 white bold"  style="width:100px;" @click='remove'>删除</button>
		</footer>
	</div>
</template>

<script>
import Default from '@/components/Default';
import { Progress } from 'vant';
import { Checkbox, CheckboxGroup } from 'vant';
	export default{
		components: {
			Progress,
			Checkbox,
            CheckboxGroup,
            Default
		},
		data()
		{
			return{
				show        : false,
				checked     : false,
				checked_all : false,
				img         : require('../../assets/img1.png'),
				data        : [],
				delete_id   : [],
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/goods/favorites').then( res=> {
					this.data = res.data;
				})
			},
			remove()
			{
				for(var i in this.data.list)
				{
					if(this.data.list[i].checked){
						this.delete_id.push(this.data.list[i].goods_id)
					}
				}
				let params = {
					id : this.delete_id
				}
				this.$http.post('/goods/disfavor',params).then( res=> {
					this.show = false;
					this.checked_all = false;
					this.delete_id = [];
					this.loadData();
				})
			},
			 //全选反选
            selectAll()
            {
            	if(this.checked_all)
            	{
	            	for(var i in this.data.list)
	            	{
	            		this.data.list[i].checked = true;
	            	}
	            	this.$set(this.data, i, this.data.list[i])
            	}
            	else
            	{
            		for(var i in this.data.list)
	            	{
	            		this.data.list[i].checked = false;
	            	}
	            	this.$set(this.data, i, this.data.list[i])
            	}
            	this.isSelectALL();
            },
            // 判断全选
            isSelectALL()
            {
            	for(var i in this.data.list)
            	{
            		if(!this.data.list[i].checked)
            		{
            			this.checked_all = false;
            			return; 
            		}
            		else
            			this.checked_all = true;
            	}
            }
		}
	}
</script>

<style lang="less">
	.collect{
		.list{
			.van-checkbox{
				margin-right: 0;
			}
			.van-checkbox__label{
				margin-left: 0;
			}
			.van-checkbox__icon{
				position: absolute;
			}
			.van-checkbox__icon, .van-checkbox__label{
				line-height: inherit;
			}
		}

	}
</style>